<template>
  <div>
    <div class="page-title-box">
      <div class="page-title">物理机</div>
      <el-button type="primary" @click="handleAdd">申请物理机</el-button>
    </div>
    <div style="margin-top:20px">
      <el-button @click="handleClick">开机</el-button>
      <el-button>关机</el-button>
      <el-button>强制关机</el-button>
      <el-button>重启</el-button>
      <el-button>强制重启</el-button>
      <el-button>释放</el-button>
      <el-button>导出</el-button>
    </div>
    <psearch :allData="tableColumn" :selectedData="showColumn" @search="handleSearch" @setTable="handleShowColumn">
    </psearch>
    <plist ref="pList" :tableData="tableData" :tableColumn="showColumn" :hasIndex="false" :hasSelect="true">
    </plist>
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 控制台弹窗 -->
    <pdlog v-model="showLog" width="418px" title="远程控制台" BtnTitleL="启动" @comfirm="handleccc" @cencel="showLog = false">
      <div style="margin:10px 20px;">
        <el-select size="small" v-model="logValue" placeholder="请选择操作系统">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </pdlog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import plist from "@/components/publicList";
  import pdlog from "@/components/publicDialog";
  import psearch from '@/components/publicSearch'

  
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        showLog: false, // 控制台弹窗
        logValue: null, // 控制台值
        showColumn: [], // 展示列
        tableColumn: [{
            field: "name1",
            label: "名称",
          },
          {
            field: "name2",
            label: "ID",
          },
          {
            field: "name3",
            label: "可用区",
            sortable: true

          },
          {
            field: "name5",
            label: "状态",
            isStatus: true
          },
          {
            field: "name6",
            label: "规格",
            sortable: true
          },
          {
            field: "name7",
            label: "镜像",
            sortable: true
          },
          {
            field: "name8",
            label: "地址",
            sortable: true
          },
          {
            field: "handle",
            type: "handler",
            label: "操作",
            btnlist: [{
                name: '远程控制台',
                handle: this.handleLog
              },
            ]
          },
        ],
        tableData: [{
            name2: "2016-05-02",
            name5: "张三",
            name3: "上海市普陀区金沙江路 1518 弄",
          },
          {
            name2: "2016-05-04",
            name5: "李四",
            name3: "上海市普陀区金沙江路 1517 弄",
          },
          {
            name2: "2016-05-01",
            name5: "王五",
            name3: "上海市普陀区金沙江路 1519 弄",
          },
          {
            name2: "2016-05-03",
            name5: "王小虎",
            name3: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        }
      }
    },
    // 注册组件
    components: {
      Pagination,
      pdlog,
      plist,
      psearch,
    },
    created() {
      this.showColumn = this.tableColumn
    },
    methods: {
      handleAdd() {
        console.log(this.$router);
        this.$router.push({
          path: '/computsuc/physical/physicalMachineAdd'
        })
      },
      handleClick() {
        // 获取选中数据
        let selectRow = this.$refs.pList.multipleSelection
        // console.log('@@@@@@',AO.axiosTest)
        AO.axiosTest()
          .then(res => {
            console.log('~~~~~~~~', res)
          })
      },
      handleccc() {
        console.log('6666666666666');
      },
      handleShowColumn(val) {
        this.showColumn = val
      },
      setTable() {
        this.$refs.settingTable.init()
      },
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getdata(this.formInline)
      },
      search() {
        this.getdata(this.formInline)
      },
      handleLog(index, row) {
        console.log(index, row);
        this.showLog = true
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.showEdit = true
      },
      handleDetail(index, row) {
        console.log(index, row);
      },
      handleSearch(val) {
        console.log('@@@@@@@', val)
      }
    }
  }
</script>

<style scoped lang="less">
  .edit-dialog {
    margin: 0px 20px 10px;
    display: flex;
    align-items: center;

    .name {
      font-weight: 650;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
      margin-right: 35px;
    }

    .el-input {
      width: 233px;
    }
  }
</style>
